<template>
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6 resume-section relative hover:shadow-md transition-shadow duration-300">
    <div class="flex justify-between items-start mb-6">
      <h2 class="text-xl font-semibold text-gray-800">基本信息</h2>
      <button v-if="!editMode" class="edit-btn p-2 rounded-full hover:bg-gray-100 transition-colors duration-200 opacity-0 group-hover:opacity-100">
        <i class="ri-pencil-line text-gray-500"></i>
      </button>
    </div>
    
    <div class="flex items-start">
      <div class="w-24 h-24 bg-gradient-to-br from-blue-50 to-primary/5 rounded-lg overflow-hidden flex items-center justify-center mr-6 border-2 border-primary/10">
        <i class="ri-user-3-line text-primary/60 text-4xl"></i>
      </div>
      <div class="flex-1">
        <div v-if="!editMode" class="grid grid-cols-2 gap-x-6 gap-y-4">
          <div>
            <div class="text-sm text-gray-500 mb-1">姓名</div>
            <div class="font-medium">{{ resumeData.name }}</div>
          </div>
          <div>
            <div class="text-sm text-gray-500 mb-1">年龄</div>
            <div>{{ resumeData.age }}岁</div>
          </div>
          <div>
            <div class="text-sm text-gray-500 mb-1">电话</div>
            <div>{{ resumeData.phone }}</div>
          </div>
          <div>
            <div class="text-sm text-gray-500 mb-1">邮箱</div>
            <div>{{ resumeData.email }}</div>
          </div>
          <div>
            <div class="text-sm text-gray-500 mb-1">现居地</div>
            <div>{{ resumeData.location }}</div>
          </div>
          <div>
            <div class="text-sm text-gray-500 mb-1">求职意向</div>
            <div class="text-primary">{{ resumeData.jobIntention }}</div>
          </div>
        </div>
        
        <div v-else class="grid grid-cols-2 gap-x-6 gap-y-4">
          <div>
            <label class="text-sm text-gray-500 mb-1 block">姓名</label>
            <input v-model="resumeData.name" type="text" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
          <div>
            <label class="text-sm text-gray-500 mb-1 block">年龄</label>
            <input v-model="resumeData.age" type="number" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
          <div>
            <label class="text-sm text-gray-500 mb-1 block">电话</label>
            <input v-model="resumeData.phone" type="text" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
          <div>
            <label class="text-sm text-gray-500 mb-1 block">邮箱</label>
            <input v-model="resumeData.email" type="email" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
          <div>
            <label class="text-sm text-gray-500 mb-1 block">现居地</label>
            <input v-model="resumeData.location" type="text" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
          <div>
            <label class="text-sm text-gray-500 mb-1 block">求职意向</label>
            <input v-model="resumeData.jobIntention" type="text" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
        </div>
        
        <div class="mt-4">
          <div class="text-sm text-gray-500 mb-1">个人介绍</div>
          <div v-if="!editMode" class="text-gray-700">
            {{ resumeData.introduction }}
          </div>
          <div v-else class="relative">
            <textarea 
              v-model="resumeData.introduction"
              class="w-full px-3 py-2 border rounded h-24 focus:outline-none focus:ring-2 focus:ring-primary" 
              placeholder="请简要介绍自己的专业背景和优势"
            ></textarea>
            <button class="absolute bottom-2 right-2 px-2 py-1 text-xs bg-primary/10 text-primary rounded flex items-center hover:bg-primary/20">
              <i class="ri-magic-line mr-1"></i>
              优化
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  editMode: boolean
}

defineProps<Props>()

const resumeData = ref({
  name: '钱志远',
  age: 28,
  phone: '138****5678',
  email: 'qianzhiyuan@example.com',
  location: '上海市浦东新区',
  jobIntention: '产品经理 / 品牌经理',
  introduction: '拥有5年互联网产品和品牌管理经验，曾主导多个用户量过百万的产品从0到1的全流程，对数据驱动的产品决策有深入理解。擅长用户研究、需求分析和产品规划，具备良好的跨部门协作能力。'
})
</script>
